<%--
  Created by IntelliJ IDEA.
  User: jacksonmelius
  Date: 12/4/12
  Time: 1:11 PM
  To change this template use File | Settings | File Templates.
--%>

<%@ page contentType="text/html;charset=UTF-8" %>
<html>
<head>
    <title></title>
    <meta name="layout" content="main">
    <g:javascript library="jquery" plugin="jquery"/>
    <link rel="stylesheet" type="text/css" href="<g:resource dir='css' file='style.css' />" />
    <r:require module="jquery"/>
    <r:script>
        $().ready(
                function() {
                    $("#searchForm").on("submit", function() {
                        var id = $('input:radio[name=searchTypes]:checked').val()
                        //alert(id)
                        if(id == "User") {
                            var type = "searchUser"
                        }
                        else if(id == "Game") {
                            var type = "searchGame"
                        }
                        else if(id == "Platform") {
                            var type = "searchPlatform"
                        }
                        var query = $("input[name='query']").val();
                        //if(query != "" & query != " ") {
                        var blah = $.ajax({
                            url: "/FinalProject/search/index",
                            data: { query: query, type: type }
                        });
                        blah.done(function(data){
                            $("#searchResults").replaceWith(data);
                        });
                        return false;
                        //}
                    });
                })
    </r:script>

</head>
<body>

<h1>
    Jackson + Danny's Videogame Emporium
</h1>

<div class="backdrop">

    <div class="tab"><g:link action="showAllUsers" controller="SiteUser" elementId="tabText">USERS</g:link></div>
    <div class="tab"><g:link action="showAllGames" controller="SiteUser" elementId="tabText">GAMES</g:link></div>
    <div class="tab"><g:link action="showAllPlatforms" controller="SiteUser" elementId="tabText">PLATFORMS</g:link></div>





    <div class="mainSection">
        <div id="textSection">

            <g:if test = "${viewType == "All Users"}">


                <div id = "title">
                    USERS:
                </div>

                <ul>
                    <g:each in="${users}">
                        <li class="list"> <g:link action="show" controller="SiteUser" id = "${it.id}">${it.name}</g:link> (Joined ${it.dateJoined})</li>
                    </g:each>
                </ul>

            </g:if>

            <g:if test ="${viewType == "All Games"}">

                <div id = "title">
                    GAMES:
                </div>

                <ul>
                    <g:each in="${games}">
                        <li class="list"> <g:link action="showGame" controller="SiteUser" id = "${it.id}">${it.name}</g:link> (${it.releaseDate})</li>
                    </g:each>
                </ul>

            </g:if>

            <g:if test ="${viewType == "All Platforms"}">


                <div id = "title">
                    PLATFORMS:
                </div>

                <ul>
                    <g:each in="${platforms}">
                        <li class="list"> <g:link action="showPlatform" controller="SiteUser" id = "${it.id}">${it.name}</g:link> (${it.dateOfRelease})</li>
                    </g:each>
                </ul>
                <br>
                <div id = "update">
                    Add new platform:
                    <g:form action="makeNew" method="GET">
                        Platform Name: <g:textField name = "platformName">platformName</g:textField> <br>
                        Release Date: <g:textField name = "releaseDate">RELEASEDATE</g:textField>
                        <g:hiddenField name="type" value = "AllPlatforms"></g:hiddenField>
                        <input type="submit" value="Add Platform">
                    </g:form>
                </div>



            </g:if>

        </div>

        <div id="searchSection">

            <g:form id="searchForm" name="searchForm">
                <g:textField name="query"/>
                <input type="submit" value="Search" />

            </g:form>

            <g:radioGroup name="searchTypes"
                          labels="['Search Users:','Search Games:','Search Platforms:']"
                          values="['User','Game','Platform']"
                          value='User'>
                <p>${it.label} ${it.radio}</p>
            </g:radioGroup>

        <%--
        <g:select name="searchTypes"
                  from="${['Search Users','Search Games', 'Search Platforms']}"
                  keys="${['User','Game','Platform']}"
            />
        --%>
            <div id="searchResults"></div>

        </div>
        <div id="clear"></div>

    </div>
</div>
</body>
</html>